<template>
  <div class="app">
    <!-- 相关文章：https://blog.csdn.net/weixin_59233142/article/details/135650995?fromshare=blogdetail&sharetype=blogdetail&sharerId=135650995&sharerefer=PC&sharesource=m0_74802991&sharefrom=from_link -->
     <!-- 相关文章：https://blog.csdn.net/wmuj_/article/details/141906683 -->
    <div class="nav-list">
      <router-link to="/props" active-class="active">1.props</router-link>
      <router-link to="/mitt" active-class="active">2.mitt</router-link>
      <router-link to="/custom" active-class="active">3.custom</router-link>
      <router-link to="/attrs" active-class="active">4.attrs</router-link>
      <router-link to="/v-model" active-class="active">5.v-model</router-link>
      <router-link to="/refs-parent" active-class="active">6.refs-parent</router-link>
      <router-link to="/provide-inject" active-class="active">7.provide-inject</router-link>
      <router-link to="/slot1" active-class="active">8.slot1</router-link>
      <router-link to="/slot2" active-class="active">9.slot2</router-link>
      <router-link to="/slot3" active-class="active">10.slot3</router-link>
      <router-link to="/shallowRef" active-class="active">shallowRef-shallowReactive</router-link>
      <router-link to="/shallowReadonly" active-class="active">shallowReadonly-readonly</router-link>
      <router-link to="/teleport" active-class="active">teleport</router-link>
      <router-link to="/susponse" active-class="active">susponse</router-link>
      <router-link to="/raw" active-class="active">toRaw-markRaw</router-link>
      <router-link to="/customRef" active-class="active">customRef</router-link>
    </div>
    <div class="main-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang='ts' name="App">
import { ref, reactive } from 'vue'

</script>


<style lang='scss' scoped>
.app{
  width: 100%;
  height: 640px;
  display: flex;


  .nav-list{
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border: 1px black solid;

  }
  .nav-list a{
    box-sizing: content-box;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px black solid;
    text-decoration: none;
    color: black;
    font-size: 18px;

    
  }
  .nav-list a:hover{
    // background-color: gray;
    color: greenyellow;

  }
  .main-container{
    width: 75%;
    height: 100%;
    border: 1px black solid;
    display: flex;
    // justify-content: center;
    align-items: center;
  }

  .active{
    background-color: gray;
    color: white !important;
  }

}
</style>